<!DOCTYPE HTML>
<html>
<body onload="runTest();">
<div>
<span>Tests that setting font of Canvas 2d context always uses up-to-date style and has font value: <span id="result"></span></span><br>
<canvas id="canvasTest"></canvas>
</div>
<script type="text/javascript">
if (window.testRunner)
    testRunner.dumpAsText();

function drawCanvasText(id, text)
{
    var canvasElement = document.getElementById(id);
    var context = canvasElement.getContext('2d');

    // Pre-draw pass to add the font to the font cache. This way, the test also
    // verifies that the style change correctly invalidates the font resolution cache.
    context.font = '1em Calibri';
    context.fillText(text, 0, 100);

    canvasElement.style.fontSize = '64px';
    context.font = '1em Calibri';
    context.fillText(text, 0, 100);
    return context.font;
}

function runTest()
{
    var fontSize = drawCanvasText('canvasTest', 'Some Text');
    var resultElement = document.getElementById('result');
    resultElement.textContent = fontSize;
}
</script>
</body>
</html>
